<template>
  <div class="passport-container">
    <van-form
      class="passport-form"
      validate-first
      ref="form"
      @failed="onFailed"
      @submit="onSubmit"
    >
      <van-field
        v-model="mobile"
        name="mobile"
        label="+86"
        placeholder="请输入手机号"
        maxlength="11"
        type="tel"
        left-icon="mobile"
        icon-prefix="my-icon"
        error-message-align="right"
        :rules="rules.mobile"
        @input="onValidateInput"
      />
      <van-field
        v-model="captcha"
        type="digit"
        name="captcha"
        placeholder="请输入验证码"
        left-icon="captcha"
        icon-prefix="my-icon"
        :rules="rules.captcha"
        error-message-align="right"
        maxlength="6"
        @input="onValidateInput"
        @click-right-icon="sendMobileCode"
      >
        <template slot="right-icon">
          {{ countdown ? countdown + 's' : '获取验证码'}}
        </template>
        <!-- <van-button
          slot="button"
          size="small"
          type="primary"
          native-type="button"
          :disabled="disableSend"
          @click="sendMobileCode"
        >{{ countdown ? countdown + 's' : '获取验证码'}}</van-button> -->
      </van-field>
      <div class="passport-form-action">
        <van-button
          round
          block
          type="warning"
          native-type="submit"
          :disabled="disableSubmit"
        >
          提交
        </van-button>
      </div>
    </van-form>

    <div
      class="change-loginmode"
      v-if="otherMode"
    >
      <van-button
        icon="arrow"
        :to="otherMode.redirect"
        :replace="otherMode.replace"
      >
        {{otherMode.text}}
      </van-button>
    </div>
  </div>
</template>
<script>
import {
  Row,
  Col,
  Cell,
  Button,
  CellGroup,
  Form,
  Field,
  Area,
  Icon,
  Image,
  Popup,
  ActionSheet,
  Lazyload
} from 'vant'

export default {
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Cell.name]: Cell,
    [Button.name]: Button,
    [CellGroup.name]: CellGroup,
    [Field.name]: Field,
    [Form.name]: Form,
    [Area.name]: Area,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [Image.name]: Image,
    [ActionSheet.name]: ActionSheet,
    Lazyload
  },
  data () {
    return {
      mobile: '',
      captcha: '',
      sms: '',
      countdown: 0,
      errors: null,
      disableSendSms: true,
      disableSubmit: true,
      rules: {
        mobile: [
          {
            required: true,
            message: '请输入手机号码'
          },
          {
            pattern: /^[1][3-9][0-9]{9}$/,
            message: '请输入正确的11手机号码'
          }
        ],
        captcha: [
          {
            required: true,
            message: '请输入短信验证码'
          },
          {
            pattern: /\d{6}/,
            message: '验证码不正确'
          }
        ]
      },
      otherMode: {
        text: '帐号密码登录',
        redirect: {
          name: 'passport/login'
        },
        replace: true
      }
    }
  },

  created () {
    this.onLoad()
  },
  watch: {
    errors: {
      handler (cv, ov) {
        console.log('failed', cv)
      },
      deep: true
    }
  },
  computed: {
    disableSend () {
      return this.disableSendSms || this.countdown > 0
    }
  },

  methods: {
    onFailed (errorInfo) {
      console.log('failed', errorInfo)
      this.errors = errorInfo.errors

      console.log('failed', this.$refs.form)
    },
    onValidateInput (value) {
      this.$refs.form
        .validate()
        .then(() => {
          this.disableSubmit = false
        })
        .catch(e => {
          this.disableSubmit = true
        })
    },
    onLoad () {},
    onSubmit (data) {
      console.log('submit', data)
      this.disableSubmit = true
      this.$http.passport.loginSms(data).then(res => {
        if (res.data) {
          this.$emit('logged', res.data)
        } else {
          this.$toast('提交失败~')
          this.disableSubmit = false
        }
      })
    },
    sendMobileCode () {
      let mobile = this.mobile
      if (!mobile) {
        this.$toast('手机号码不能为空')
      } else if (!/^[1][3-9][0-9]{9}$/.test(mobile)) {
        this.$toast('手机号码不正确')
      } else if (this.countdown > 0) {
        this.$toast('已发送至您的手机')
      } else {
        this.$http.base
          .sendSmsCode({
            mobile: this.mobile,
            scope: 'login'
          })
          .then(response => {
            if (response.data) {
              this.$toast('发送成功')
              this.countdown = 60
              this.countdownSubtract()
            } else {
              this.$toast('发送失败')
            }
          })
      }
    },
    countdownSubtract () {
      if (this.countdown > 0) {
        setTimeout(() => {
          this.countdown -= 1
          this.countdownSubtract()
        }, 1000)
      }
    },
    /**
     * 清除验证提示
     * @param attrs
     */
    resetField (attrs) {
      attrs = !attrs
        ? Object.keys(this.errorMsg)
        : Array.isArray(attrs)
          ? attrs
          : [attrs]
      attrs.forEach(attr => {
        this.errorMsg[attr] = ''
      })
    }
  }
}
</script>
